<template>
  <div style="padding: 20px">
    <el-form ref="form" :model="search" inline>
      <el-form-item label="菜单名称" width="80px" prop="voName">
        <el-input v-model="search.voName" size="small" clearable placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select v-model="search.state" size="small" clearable placeholder="菜单状态">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchAll()">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" icon="el-icon-plus" plain @click="add()">新增</el-button>
        <el-button
          type="info"
          size="mini"
          icon="el-icon-sort"
          plain
          @click="contraction"
        >展开/折叠</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      row-key="nodeId"
      highlight-current-row
      :header-cell-style="{
        background: '#F8F8F9',
        color: 'rgb(81, 90, 110)',
        fontSize: '13px',
      }"
      size="small"
      label-width="100%"
      :tree-props="{ children: 'children'}"
    >
      <el-table-column label="菜单名称" prop="voName" width="200" />
      <el-table-column label="菜单代码" prop="perms" width="200" />
      <el-table-column label="图标" prop="voIcon">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.voIcon" />
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="voOrder" />
      <el-table-column label="权限表示" prop="roleSign" />
      <el-table-column label="组件路径" prop="voPath" />
      <el-table-column label="状态" prop="state">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state == 1">正常</el-tag>
          <el-tag v-else>停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" size="small" icon="el-icon-edit" @click="change(scope.row)">修改</el-button>
          <el-button type="text" size="small" icon="el-icon-plus" @click="handleAddPage(scope.row)">新增</el-button>
          <el-button type="text" size="small" icon="el-icon-delete" @click="handle(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogTableVisible" width="680px" @close="resetForm('detailDate')">
      <el-form
        ref="detailDate"
        :model="detailDate"
        label-position="right"
        style="font-size: 12px"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="菜单类型" prop="resType">
          <el-radio-group v-model="detailDate.resType" style="width: 460px;" @change="handleChange">
            <el-radio :label="'M'">目录</el-radio>
            <el-radio :label="'C'">菜单</el-radio>
            <el-radio :label="'F'">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-form-item v-if="this.detailDate.resType != 'F'" label="菜单图标" prop="voIcon">
              <el-popover
                placement="bottom-start"
                width="460"
                trigger="click"
                @show="$refs['iconSelect'].reset()"
              >
                <IconSelect ref="iconSelect" @selected="selected" />
                <el-input slot="reference" v-model="detailDate.voIcon" style="width: 460px;" placeholder="点击选择图标" clearable>
                  <svg-icon
                    v-if="detailDate.voIcon"
                    slot="prefix"
                    :icon-class="detailDate.voIcon"
                    class="el-input__icon"
                    style="height: 32px;width: 16px;"
                  />
                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
                </el-input>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="voName">
              <el-input v-model="detailDate.voName" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="voOrder">
              <el-input-number v-model="detailDate.voOrder" controls-position="right" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="this.detailDate.resType != 'F'" label="是否外链" prop="isFrame">
              <el-radio-group v-model="detailDate.isFrame">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="this.detailDate.resType != 'F'" label="路由地址" prop="voPath">
              <el-input v-model="detailDate.voPath" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item v-if="this.detailDate.resType == 'C'" label="组件路径" prop="voComponent">
              <el-input v-model="detailDate.voComponent" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单代码" prop="perms">
              <!-- :disabled="title==='修改菜单'"  -->
              <el-input v-model="detailDate.perms" placeholder="请输入菜单代码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item v-if="this.detailDate.resType != 'F'" label="显示状态" prop="voHide">
              <el-radio-group v-model="detailDate.voHide">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="this.detailDate.resType != 'F'" label="菜单状态" prop="state">
              <el-radio-group v-model="detailDate.state">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>

    </el-dialog>
  </div>
</template>
<script>
import { getList } from '@/api/menu'
import IconSelect from '@/components/IconSelect'
export default {
  components: {
    IconSelect
  },
  data() {
    return {
      getMenuListBody: {
        page: {
          page: 0,
          pageSize: 100
        }
      },
      search:{
          state: '',
          voName: '',
      },
      flag: 0,
      title: '',
      dialogTableVisible: false,
      detailDate: {
        id: '',
        parent: '',
        state: '',
        voIcon: '',
        voName: '',
        resType: '',
        voHide: '',
        isFrame: '',
        voPath: '',
        voOrder: '',
        voComponent: '',
        perms: ''
      },
      rules: {
        voName: [
          {
            required: true,
            message: '菜单名称不能为空'
          }
        ],
        voOrder: [
          {
            required: true,
            message: '显示排序不能为空'
          }
        ],
        voPath: [
          {
            required: true,
            message: '路由地址不能为空'
          }
        ]

      },
      showStyle: true,
      form: {
        name: '',
        state: ''
      },
      options: [{
        value: 1,
        label: '正常'
      },
      {
        value: 0,
        label: '停用'
      }
      ],
      tableData: [{}]
    }
  },

  created() {
    this.gettidList()
  },

  methods: {

    handleChange(newValue) {
      console.log(newValue)
    },

    submit() {
      if (this.flag == 0) {
        this.$refs['detailDate'].validate((valid) => {
          if (valid) {
            this.$request({
              url: '/menu/save',
              method: 'post',
              data: this.detailDate
            }).then(res => {
              if (res.success) {
                this.$notify.success('新建成功')
                this.resetForm('detailDate')
                this.dialogTableVisible = false
                this.gettidList()
              } else {
                this.$notify.warning(res.errMessage)
              }
            })
          }
        })
      } else {
        this.$refs['detailDate'].validate((valid) => {
          if (valid) {
            this.$request({
              url: '/menu/update',
              method: 'post',
              data: this.detailDate
            }).then(res => {
              if (res.success) {
                this.$notify.success('更新成功')
                this.resetForm('detailDate')
                this.dialogTableVisible = false
                this.gettidList()
              } else {
                this.$notify.warning(res.errMessage)
              }
            })
          }
        })
      }
    },

    selected(name) {
      this.detailDate.voIcon = name
    },
    gettidList() {
      console.log('走的开始')
      getList(this.getMenuListBody).then(res => {
        if (res.success) {
          const tableData = []
          // 一层一层的走
          // 先把所有parent=-1的挑出来，作为最外层的
          res.data.forEach(item => {
            if (item.parent == '-1') {
              tableData.push(item)
            }
          })
          // 第二层
          tableData.forEach(table => {
            res.data.forEach(item => {
              if (item.parent == table.id) {
                table.children.push(item)
              }
            })
          })
          // 第三层
          tableData.forEach(table => {
            table.children.forEach(child => {
              res.data.forEach(item => {
                if (item.parent == child.id) {
                  child.children.push(item)
                }
              })
            })
          })

          // for (var i = 0; i < res.data.length; i++) {
          //   for (var m = 0; m < res.data.length; m++) {
          //     if (res.data[i].id == res.data[m].parent) {
          //       res.data[i].children.push(res.data[m])
          //       res.data.splice(m, 1)
          //     }
          //   }
          // }

          // for (var o = 0; o < res.data.length; o++) {
          //   for (var k = 0; k < res.data[o].children.length; k++) {
          //     for (var j = 0; j < res.data.length; j++) {
          //       if (res.data[o].children[k].id == res.data[j].parent) {
          //         res.data[o].children[k].children.push(res.data[j])
          //         res.data.splice(j, 1)
          //       }
          //     }
          //   }
          // }
          this.tableData = tableData
        }
      })
    },

    searchAll() {


      if (this.search.voName === '' && this.search.state === ''){
            this.gettidList()
          } else {
            let data = {
            relation:{
              conditions:[]
            }
          }

          if (this.search.voName){
              data.relation.conditions.push({
                colName: 'vo_name',
                ruleType: 'like',
                value: this.search.voName
              })
          }

          if (this.search.state !== ''){
              data.relation.conditions.push({
                colName: 'state',
                ruleType: 'eq',
                value: this.search.state
              })
          }

          this.$request({
              url: '/menu/commonList',
              method: 'post',
              data: {
                page: {
                   page: 1,
                   pageSize: 1000
                },
                order:[{
                    colName: 'vo_name',
                    orderType: '',
                }],
                relation: data.relation
              }
          }).then(res => {
            this.tableData = res.data
                // this.totalCount = res.totalCount
                // this.totalPages = res.totalPages
          })
          }

      // if (this.form.name === '' && this.form.state === '') {
      //   this.gettidList()
      // } else {
      //   getList(this.getMenuListBody).then(res => {
      //     if (res.success) {
            
      //     }
      //   })
      // }

      // if (this.form.name != '' && this.form.state !== '') {
      //   getList(this.getMenuListBody).then(res => {
      //     if (res.success) {
      //       for (var t = 0; t < res.data.length; t++) {
      //         if (this.form.name == res.data[t].voName && this.form.state == res.data[t].state) {
      //           var arr = []
      //           arr.push(res.data[t])
      //           this.tableData = arr
      //           break
      //         }
      //         this.tableData = [{}]
      //       }
      //     }
      //   })
      // } else if (this.form.name != '') {
      //   getList(this.getMenuListBody).then(res => {
      //     if (res.success) {
      //       for (var t = 0; t < res.data.length; t++) {
      //         if (this.form.name == res.data[t].voName) {
      //           var arr = []
      //           arr.push(res.data[t])
      //           this.tableData = arr
      //           break
      //         }
      //       }
      //     }
      //   })
      // } else if (this.form.state !== '') {
      //   getList(this.getMenuListBody).then(res => {
      //     if (res.success) {
      //       var arr = [{}]
      //       for (var h = 0; h < res.data.length; h++) {
      //         console.log(res.data[h].state)
      //         console.log(this.form.state)
      //         if (res.data[h].state === this.form.state) {
      //           arr.push(res.data[h])
      //         }
      //       }
      //       this.tableData = arr
      //     }
      //   // this.tableData = res.data
      //   })
      // } else {
      //   this.gettidList()
      // }
    },

    resetForm(formName) {
      console.log('重置')
      this.$refs[formName].resetFields()
    },

    contraction(val) {
      if (this.showStyle) {
        this.showStyle = false
        if (this.tableData.length != 0) {
          const elsopen = this.$el.getElementsByClassName(
            'el-table__expand-icon--expanded'
          )
          if (
            this.$el.getElementsByClassName('el-table__expand-icon--expanded')
          ) {
            for (let i = 0; i < elsopen.length; i++) {
              elsopen[i].click()
            }
          }
        }
      } else {
        this.showStyle = true
        const els = document.getElementsByClassName('el-table__expand-icon')
        if (this.tableData.length != 0 && els.length != 0) {
          for (let j1 = 0; j1 < els.length; j1++) {
            els[j1].classList.add('dafult')
          }
          if (
            this.$el.getElementsByClassName('el-table__expand-icon--expanded')
          ) {
            const open = this.$el.getElementsByClassName(
              'el-table__expand-icon--expanded'
            )
            for (let j = 0; j < open.length; j++) {
              open[j].classList.remove('dafult')
            }
            const dafult = this.$el.getElementsByClassName('dafult')
            for (let a = 0; a < dafult.length; a++) {
              dafult[a].click()
            }
          }
        }
      }
    },

    handle(val) {
      console.log('删除')
      this.$confirm('是否确认删除名称为"' + val.voName + '"的数据项?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$request({
            url: '/menu/delete/' + val.id,
            method: 'post'
          }).then(res => {
            if (res.success) {
              this.gettidList()
            }
          })
        })
        .catch(() => {})
    },
    add() {
      this.flag = 0
      this.title = '新增菜单'
      this.detailDate.id = ''
      this.detailDate.parent = ''
      this.detailDate.state = ''
      this.detailDate.voIcon = ''
      this.detailDate.voName = ''
      this.detailDate.resType = ''
      this.detailDate.voHide = ''
      this.detailDate.isFrame = ''
      this.detailDate.voPath = ''
      this.detailDate.perms = ''
      this.detailDate.voComponent = ''
      this.detailDate.voOrder = ''
      this.dialogTableVisible = true
    },

    change(val) {
      this.flag = 1
      this.title = '修改菜单'
      this.detailDate.id = val.id
      this.detailDate.parent = val.parent
      this.detailDate.state = val.state
      this.detailDate.voIcon = val.voIcon
      this.detailDate.voName = val.voName
      this.detailDate.resType = val.resType
      this.detailDate.voHide = parseInt(val.voHide)
      this.detailDate.isFrame = val.isFrame
      this.detailDate.voPath = val.voPath
      this.detailDate.perms = val.perms
      this.detailDate.voOrder = val.voOrder
      this.detailDate.voComponent = val.voComponent
      this.dialogTableVisible = true
    },

    handleAddPage(val) {
      this.flag = 0
      this.title = '新增子菜单'
      this.detailDate.id = ''
      this.detailDate.parent = val.id
      this.detailDate.state = ''
      this.detailDate.voComponent = ''
      this.detailDate.voIcon = ''
      this.detailDate.voName = ''
      this.detailDate.resType = ''
      this.detailDate.voHide = ''
      this.detailDate.isFrame = ''
      this.detailDate.voPath = ''
      this.detailDate.voOrder = ''
      this.dialogTableVisible = true
    }
  }
}

</script>
<style>
</style>
